<template>
  <div class="login">
    <div class="logo">
      <img
        src="../../assets/images/logo.png"
        alt=""
      >
    </div>
    <div class="content">
      <div
        class="contentbox"
        ref="contentbox"
      >
        <div class="loginbox">
          <div class='input-item'>
            <input
              type="text"
              placeholder="用户名/手机号"
              v-model="forget.mobile"
              @focus="shouline"
              @blur="hideline"
            >
          </div>
          <div class='input-item'>
            <input
              type="password"
              placeholder="请输入新密码"
              v-model="forget.new_password"
              @focus="shouline"
              @blur="hideline"
            >
          </div>
          <div class='input-item'>
            <input
              type="password"
              placeholder="请确认新密码"
              v-model="forget.verify_password"
              @focus="shouline"
              @blur="hideline"
            >
          </div>
          <div class='input-item'>
            <input
              type="text"
              v-model="forget.code"
              @focus="shouline"
              @blur="hideline"
              placeholder="请输入验证码"
            >
            <button
              @click="getCode"
              :disabled='isget'
            >{{button}}</button>
          </div>
        </div>
      </div>
      <div class='submit'>
        <button @click="submit">确定</button>
      </div>

    </div>
  </div>
</template>
<script>
import { forget, getcode } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      button: "获取验证码",
      isget: false,
      forget: {
        mobile: "",
        new_password: "",
        code: "",
        verify_password: "",
        sms_id: ""
      }
    };
  },
  methods: {
    shouline(e) {
      var a = 0;
      var timer = setInterval(function() {
        a += 0.4;
        e.target.style.borderBottom = `1px solid rgba(206, 52, 61,${a})`;
        console.log(1);
        if (a >= 1) {
          clearInterval(timer);
        }
      }, 200);
    },
    getCode() {
      const that = this;
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.registerData.mobile)) {
        Toast("请输入正确的手机号码 ");
      } else {
        getcode({ mobile: this.registerData.mobile })
          .then(res => {
            if (res.status == 200) {
              console.log(132);
              this.registerData.sms_id = res.data.sms_id;
              Toast("获取验证码成功");
              that.isget = true;
              var s = 60;
              var times = setInterval(() => {
                s--;
                that.button = `${s}秒`;
                if (s <= 0) {
                  clearInterval(times);
                  this.isget = false;
                  this.button = "获取验证码";
                }
              }, 1000);
            } else Toast("获取验证码异常");
          })
          .catch(err => {});
      }
    },
    getCode() {
      const that = this;
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.forget.mobile)) {
        Toast("请输入正确的手机号码 ");
      } else {
        getcode({ mobile: this.forget.mobile })
          .then(res => {
            if (res.status == 200) {
              console.log(132);
              this.forget.sms_id = res.data.sms_id;
              Toast("获取验证码成功");
              that.isget = true;
              var s = 60;
              var times = setInterval(() => {
                s--;
                that.button = `${s}秒`;
                if (s <= 0) {
                  clearInterval(times);
                  this.isget = false;
                  this.button = "获取验证码";
                }
              }, 1000);
            } else Toast("获取验证码异常");
          })
          .catch(err => {});
      }
    },
    hideline(e) {
      e.target.style.borderBottom = `1px solid #ccc`;
    },
    submit() {
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.forget.mobile)) {
        Toast("请输入正确的手机号码 ");
        return;
      }
      if (!/^[\w_-]{6,16}$/.test(this.forget.new_password)) {
        Toast("请输入6-16位密码");
        return;
      }
      if (!/^[\w_-]{6,16}$/.test(this.forget.verify_password)) {
        Toast("请输入6-16位确认密码");
        return;
      }
      if (this.forget.new_password != this.forget.verify_password) {
        Toast("两次密码不一致");
        return;
      }
      if (!this.forget.code) {
        Toast("请输入验证码");
        return;
      }
      forget(this.forget).then(res => {
        Toast(res.message);
        if (res.status == 200) {
          setTimeout(() => {
            this.$router.push(
              {
                path: "/login"
              },
              2000
            );
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.login {
  width: 100%;

  background: linear-gradient(
    180deg,
    rgba(223, 93, 18, 1) 0%,
    rgba(207, 28, 53, 1) 100%
  );
  opacity: 0.54;
  .logo {
    z-index: 2;

    position: absolute;
    left: 50%;

    top: 80px;
    transform: translateX(-50%);
    text-align: center;
    img {
      width: 106px;
      height: 106px;
    }
  }
  .header {
    header {
      color: #000;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 2px;
      .icon-icon- {
        color: #000 !important;
      }
    }
  }
  .content {
    padding: 60px 30px;
    background-color: #fff;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 22px;
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    .line {
      width: 100%;
      height: 3px;
      position: relative;
      left: 0;
      top: 10px;
      span {
        transition: 0.5s all;
        position: absolute;
        left: 0;
        top: 0px;
        display: inline-block;
        width: 25px;
        height: 2px;
        background-color: #e6555d;
      }
    }
    .loginbox {
      -webkit-flex-shrink: 0;
      width: 100%;
      transform: translateX(0);
      transition: 0.5s all;
    }
    .contentbox {
      height: 270px;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      overflow: hidden;
      flex-wrap: nowrap;
      transition: all 0.5s;
    }

    .change {
      span {
        font-size: 20px;
        font-family: "MicrosoftYaHei";
        padding-right: 60px;
      }

      span {
        color: #e5b5b8;
      }
      .activeClass {
        color: #cb313a;
      }
    }
  }
  .input-item {
    width: 100%;
    height: 45px;
    margin-top: 20px;
    position: relative;
    left: 0;
    top: 0;
    button {
      position: absolute;
      right: 15px;
      top: 10px;
      outline: none;
      border: none;
      width: 84px;
      height: 25px;
      border-radius: 13px;
      color: #ce343d;
      font-size: 12px;
      background: none;
      border: 1px solid #cc323b;
    }
    input {
      padding-left: 15px;
      font-size: 16px;
      width: 100%;
      height: 100%;
      background: none;
      border: none;
      outline: none;
      border-bottom: 1px solid #ccc;
    }
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #ccc;
      /* placeholder字体大小  */
      font-size: 14px;
      /* placeholder位置  */
      // text-align: right;
    }
  }
  .submit {
    position: absolute;
    right: 30px;
    bottom: -20px;
    letter-spacing: 2px;
    font-size: 16px;
    text-align: center;
    button {
      width: 150px;
      height: 50px;
      border-radius: 25px;
      background:linear-gradient(-28deg,rgba(203,49,58,1),rgba(243,95,104,1));
box-shadow:0px 2px 27px 0px rgba(181,25,34,1);
border-radius:50px;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 10px;
      border: none;
      outline: none;
      color: #fff;
      text-align: center;
      padding-left: 20px;
    }
  }
  .operate {
    width: 80%;
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    font-size: 16px;
  }
}
</style>

